<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="box">
        <div v-if="show">稀饭</div>
        <div v-else>大盘鸡</div>
        <div v-show="show">炒饭</div>
        <button @click="change()" @mouseover="fn()">改变</button>
        <img :src="imgSrc" />

        <!-- 切换密码框和文本框 -->
        <button @click="showPass()" v-text="btnText"></button>

        <input :type="inputType" v-model="inputVal" />
        <p v-text="inputVal"></p>
        <!-- 无需加name属性，绑定了同一个变量 -->
        <input type="radio" v-model="radioVal" value="eat" />吃饭
        <input type="radio" v-model="radioVal" value="sleep" />睡觉
        <p v-text="radioVal"></p>

        <!-- 复选框 -->
        <input type="checkbox" v-model="checkVal" value="吃饭" />吃饭
        <input type="checkbox" v-model="checkVal" value="学习" />学习
        <input type="checkbox" v-model="checkVal" value="睡觉" />睡觉
        <p v-text="checkVal"></p>
        <ul>
            <li v-for="(item,index) in arr" v-text="item + index" @click="liClick(item)"></li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                arr: ['Java', 'JavaScript', 'Python'],
                checkVal: [],// 复选框的值，需要初始值为数组
                radioVal: 'eat', // 单选框的值
                inputVal: '', // 输入框的值 
                btnText: '显示密码', // 输入框的类型
                inputType: 'password',
                show: true, // 是否展示图片
                imgSrc: 'image/01.png'
            },
            methods: {
                liClick(val) {
                    console.log('liClick..', val);
                },
                showPass() {
                    console.log(this.checkVal, this.radioVal, this.inputVal);
                    // 如果是文本框，点击切换为密码框，如果。。
                    if (this.inputType === 'password') {
                        this.inputType = 'text';
                        this.btnText = '隐藏密码';
                    } else {
                        this.inputType = 'password';
                        this.btnText = '显示密码';
                    }
                },
                change() {
                    console.log('change...');
                    // this.show = !this.show;
                    this.imgSrc = 'image/02.png';
                },
                fn() {
                    console.log('fn...');
                }
            }
        });
        /*
            Vue指令：v-指令
            条件渲染类：
                v-if，v-else：根据表达式决定元素是否渲染（加载）到页面，适合变化不大的元素
                v-show：切换元素的css样式是否为 display:none ，适合较多切换的场景

            绑定类：
                v-on:事件名，可简写为@事件名，为元素绑定事件
                v-bind:属性，可简写为 :属性 ，用于为元素动态绑定属性
                v-model="表达式"，用于绑定表单元素的值，用于复选框需要使用数组

            循环类：
                v-for="(item,index) in 数组或对象"，用于循环展示元素
                1.哪个元素需要循环，就在哪个标签标签上使用v-for
                2.item是元素本身，index是元素的下标
        */
    </script>
</body>

</html>